<template>
    <div>
        <e-charts :id="id" class="chart" :option="props.option" />
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref,nextTick  } from 'vue';

import * as echarts from 'echarts';
/** 接受父组件传来的值  */
const props = defineProps({
    option: {
        type: Object,
        require: true
    },
    id: {
        type: String,
        require: true
    }
});

onMounted(() => {});
nextTick(()=>{
    var chartDom = document.getElementById(props.id || '');
    var myChart = echarts.init(chartDom);
    props.option && myChart.setOption(props.option);
})
</script>

<style scoped>
.chart {
    width: 670px;
    height: 300px;
}
</style>